<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯课堂案例</title>
    <link rel="stylesheet" href="index.css">
</head>
<style>

</style>

<body>
<div class="courses-wrap">
    <div class="course-tab js-coursw-filter" >
        <ul class="course-tab-list js-course-tab-list clearfix">
            <li class="tab-item">
                <a href="javascript:;"  class="course-tab-lk current">全部</a>
                </li>
                <li class="tab-item"> 
                    <a href="javascript:;"  class="course-tab-lk">公益课程</a>
                </li>
               <li class="tab-item">
                 <a href="javascript:;"  class="course-tab-lk">就业课程</a>
               </li>
               
        </ul>
    </div>
</div>


<div class="course-card-list-wrap">
<ul class="course-card-list">
    <li class="card-item"><div><a href="" class="img-lk">
        <img src="img/css.jpg" alt="">
    </a>
    <div class="item-status">
        <span class="item-class-text">随到随学</span>
    </div>
    <h4 class="item-tt">
        <a href="">测试</a>
    </h4>
    <div class="item-line">
        <div class="line-cell">免费</div>
        <span class="line-cell">18课时</span>
    </div>
</div></li>
    <li class="card-item"><div><a href="" class="img-lk">
        <img src="img/css.jpg" alt="">
    </a>
    <div class="item-status">
        <span class="item-class-text">随到随学</span>
    </div>
    <h4 class="item-tt">
        <a href="">测试</a>
    </h4>
    <div class="item-line">
        <div class="line-cell">免费</div>
        <span class="line-cell">18课时</span>
    </div>
</div></li>
    <li class="card-item"><div><a href=""  class="img-lk">
        <img src="img/css.jpg" alt="">
    </a>
    <div class="item-status">
        <span class="item-class-text">随到随学</span>
    </div>
    <h4 class="item-tt">
        <a href="">测试</a>
    </h4>
    <div class="item-line">
        <div class="line-cell">免费</div>
        <span class="line-cell">18课时</span>
    </div>
</div></li>
    <li class="card-item"><div><a href=""  class="img-lk">
        <img src="img/css.jpg" alt="">
    </a>
    <div class="item-status">
        <span class="item-class-text">随到随学</span>
    </div>
    <h4 class="item-tt">
        <a href="">测试</a>
    </h4>
    <div class="item-line">
        <div class="line-cell">免费</div>
        <span class="line-cell">18课时</span>
    </div>
</div></li>
    <li class="card-item"><div><a href=""  class="img-lk">
        <img src="img/css.jpg" alt="">
    </a>
    <div class="item-status">
        <span class="item-class-text">随到随学</span>
    </div>
    <h4 class="item-tt">
        <a href="">测试</a>
    </h4>
    <div class="item-line">
        <div class="line-cell">免费</div>
        <span class="line-cell">18课时</span>
    </div>
</div></li>
</ul>
</div>


<div id="l_data" style="display: none;">[{"id": "1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477"},{"id": "2","course":"WEB前端工程师就业班之深度JS DOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477"},{"id": "3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477"},{"id": "4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477"},{"id": "5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477"},{"id": "6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477"},{"id": "7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477"}]</div>
</body>
<script type="text/javascript">
 
</script>

</html>